<template>
  <view class="myfile">
    <view v-for="(item, index) in xiazai" :key="index" class="order_file">
      <view class="file_box">
        <view class="file_icon">
          <text class="icon iconfont icon-wenjian" style="color: rgb(134, 238, 238)"></text>
        </view>
        <view @click="onsetfile(item)">
          <view class="center">
            <view class="moren" v-if="item.isdefult == 1">
              <text class="iconfont icon-moren" :style="'color:' + item.color"></text>
            </view>
            <view class="name">
              <!-- 列表 -->

              <text class="text1">{{ item.wenjianming }}</text>
            </view>
            <view class="file_name">{{ item.date }}</view>
          </view>
        </view>
        <view class="caozuo">
          <view class="edit" @tap="shangchu(item)">
            <text class="iconfont icon-bianji"></text>删除
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
//
import { ref ,getCurrentInstance} from 'vue'

import { getsjuan, preview, insert, getDoc22, deleteFile } from '@/services/my copy'
import { guanzhuStore, myStore, ShouyeStore } from '@/stores'

import { formatMessageDate, formatTime, getChatTime } from '@/composables/time'
const { proxy } = getCurrentInstance()
// #ifdef MP-WEIXIN
import unibadge from '../../components/uni-badge/uni-badge.vue'
import unipopup from '../../components/components/uni-popup/uni-popup.vue'

// #endif
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
// 引入docx-preview插件
import { renderAsync } from '../../../node_modules/docx-preview/dist/docx-preview.mjs'
const xiazai = ref([])
// 引入
const user = myStore()
const urll = ref('')
const childRef = ref()
onLoad(async (e) => {
  console.log(e.url, 'dasd')
  urll.value = e.url

  if (e.url) {
    uni.showLoading({
      title: '正在下载...',
    })

    uni.downloadFile({
      url:proxy.$baseUrl+'/'+ e.url, //下载地址接口返回
      filePath: `${uni.env.USER_DATA_PATH}/${e.mingzhi}.docx`,
      success: async (data) => {
        if (data.statusCode === 200) {
          console.log(data.filePath, 'ddd12')
          uni.hideLoading()
          uni.getSavedFileList({
            success: function (res1) {
              console.log(res1.fileList, 'dddddddddddddddddddddddddd')
            },
          })
          // 查询加插入'http://159.75.90.81:3005/' +
          // 先插入
          const res3 = await insert({
            url: e.url,
            mingzhi: e.mingzhi,
            user: user.userinfo.username,
          })
          console.log(res3, '123')
          let res1 = await getDoc22({
            url: e.url,
            mingzhi: e.mingzhi,
            user: user.userinfo.username,
          })
          console.log(res1, '1232')
          xiazai.value = res1.data
          // 提示下载好了是否打开文档查看
          uni.showModal({
            title: '是否打开文档查看',
            content: '是否打开文档查看',
            success: function (res) {
              //文件保存到本地
              uni.saveFile({
                tempFilePath: data.tempFilePath, //临时路径
                success: function (res) {
                  uni.showToast({
                    icon: 'none',
                    mask: true,
                    title: '文件已保存：' + data.filePath, //保存路径
                    duration: 3000,
                  })
                },
              })

              if (res.confirm) {
                //打开文档查看
                //打开文档查看
                uni.openDocument({
                  filePath:proxy.$baseUrl+'/' + data.filePath,
                  showMenu: true,
                  success: function (res) {
                    // console.log('打开文档成功');
                    console.log(data.filePath, 'ddd')
                  },
                })
              }
            },
          })
          //文件保存到本地
          // uni.saveFile({
          //   tempFilePath: data.tempFilePath, //临时路径
          //   success: function (res) {
          //     // console.log('打印res',res)
          //     uni.showToast({
          //       icon: 'success',
          //       mask: true,
          //       title: '文件已保存：' + res.savedFilePath, //保存路径
          //       duration: 2000,
          //     })
          //     uni.getSavedFileList({
          //       success: function (res1) {
          //         console.log(res1.fileList, 'dddddddddddddddddddddddddd')
          //       },
          //     })
          //     console.log(res.savedFilePath,'ddddsadwdasdaw');
          //     //自动打开文档查看
          //     setTimeout(() => {
          //       var filePath = res.savedFilePath
          //       uni.openDocument({
          //         //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
          //         filePath: filePath,
          //         showMenu: true,
          //         success: function (res) {
          //           console.log('打开文档成功')
          //         },
          //       })
          //     }, 2000)
          //   },
          // })
        }
      },
      fail: (err) => {
        console.log(err)
        uni.showToast({
          icon: 'none',
          mask: true,
          title: '失败请重新下载',
        })
      },
    })
  } else {
    // 只是查询即可\
    let res1 = await getDoc22({ url: e.url, mingzhi: e.mingzhi, user: user.userinfo.username })
    console.log(res1, '1232')
    xiazai.value = res1.data
    uni.getSavedFileList({
      success: function (res1) {
        console.log(res1.fileList, 'dddddddddddddddddddddddddd')
      },
    })
  }

  // // 渲染到页面
  //       })
  // 、、、、、、这个是自带的小程序预览
})
const shangchu = async (item) => {
  // 确定删除吗
  uni.showModal({
    title: '是否删除',
    content: '是否删除',
    success: async function (res) {
      if (res.confirm) {
        // 确定删除
        //
        let res1 = await deleteFile({
          url: item.url,
          mingzhi: item.wenjianming,
          user: user.userinfo.username,
        })
            // 只是查询即可\
    let res2 = await getDoc22({  user: user.userinfo.username })
    console.log(res2, '1232')
    xiazai.value = res2.data
      }
    },
  })
}
const onsetfile = (item) => {
  uni.downloadFile({
    url:proxy.$baseUrl+'/'+ item.wenjian, //下载地址接口返回
    filePath: `${uni.env.USER_DATA_PATH}/${item.wenjianming}.docx`,
    success: async (data) => {
      if (data.statusCode === 200) {
        // 提示下载好了是否打开文档查看
        uni.showModal({
          title: '是否打开文档查看',
          content: '是否打开文档查看',
          success: function (res) {
            if (res.confirm) {
              //打开文档查看
              //打开文档查看
              uni.openDocument({
                filePath: data.filePath,
                showMenu: true,
                success: function (res) {
                  // console.log('打开文档成功');
                  console.log(data.filePath, 'ddd')
                },
              })
            }
          },
        })
        //文件保存到本地
        // uni.saveFile({
        //   tempFilePath: data.tempFilePath, //临时路径
        //   success: function (res) {
        //     // console.log('打印res',res)
        //     uni.showToast({
        //       icon: 'success',
        //       mask: true,
        //       title: '文件已保存：' + res.savedFilePath, //保存路径
        //       duration: 2000,
        //     })
        //     uni.getSavedFileList({
        //       success: function (res1) {
        //         console.log(res1.fileList, 'dddddddddddddddddddddddddd')
        //       },
        //     })
        //     console.log(res.savedFilePath,'ddddsadwdasdaw');
        //     //自动打开文档查看
        //     setTimeout(() => {
        //       var filePath = res.savedFilePath
        //       uni.openDocument({
        //         //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
        //         filePath: filePath,
        //         showMenu: true,
        //         success: function (res) {
        //           console.log('打开文档成功')
        //         },
        //       })
        //     }, 2000)
        //   },
        // })
      }
    },
    fail: (err) => {
      console.log(err)
      uni.showToast({
        icon: 'none',
        mask: true,
        title: '失败请重新下载',
      })
    },
  })
}
</script>

<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
@import url('../../components/animate.min.css');
.fshu {
  // 加粗

  font-size: 30rpx;
  display: flex;
  justify-content: space-between;
  //
  margin-top: 30rpx;
  // 底部线条
  border-bottom: 1px solid #373333;
  width: 85%;
  height: 100rpx;
  // 圆润
  border-radius: 13rpx;
  // 背景颜色
  background-color: rgb(227, 219, 98);
  margin-left: 40rpx;
  padding: 20rpx;
}
.daxiao {
  // 左右间距20px
  margin-left: 15px;
  // 图标变大
  font-size: 25px;
}
.scroll-row {
  width: 100%;
  white-space: nowrap;
  height: 100rpx;
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
  border-bottom-color: #dee2e6;
}
.scroll-row-item {
  display: inline-block !important;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  padding-left: 50rpx;
  padding-right: 50rpx;
  font-size: 35rpx;
}
.color1 {
  color: red;
  font-size: 40rpx;
  font-weight: 700;
}

/*  */

.swiper {
  height: 1000rpx;
}
.loadmore {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rpx;
  background-color: #f9f5f5;
  padding: 30rpx;
}
.font {
  font-size: 30rpx;
  color: #a9a5a0;
}
// 聊天图标的红点
.weizhi {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: red;
}

// 下载内容
/*每个页面公共css */

.myfile {
  padding: 10upx 4%;
  padding-bottom: 140upx;
  margin-top: 10upx;
}

.order_file {
  height: 180upx;
  width: 100%;
  background-color: #fff;
  border-radius: 10upx;
  position: relative;
  box-shadow: 0upx 0upx 10upx #ddd;
  margin-bottom: 20upx;
}

.order_file image {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.file_box {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  box-sizing: border-box;
  padding: 20upx;
  display: flex;
  align-items: center;
}

.file_icon text {
  font-size: 40upx;
  margin-left: 10upx;
}

.file_box .center {
  margin-left: 20upx;
}

.file_box .center .name {
  height: 60upx;
  line-height: 60upx;
}

.file_box .center .name .text1 {
  font-size: 26upx;
  font-weight: bold;
  color: #333;
  display: inline-block;
  margin-right: 20upx;
}

.phones {
  font-size: 24upx;
  color: #999;
  z-index: 0;
}

.file_box .file_name {
  font-size: 26upx;
  font-weight: bold;
  color: #333;
}

.nofile {
  margin-left: 40upx;
  font-weight: bold;
  color: #333;
  font-size: 26upx;
}

.caozuo {
  position: absolute;
  right: 20upx;
  display: flex;
  top: 20upx;
}

.caozuo view {
  font-size: 24upx;
  color: #666;
  margin-left: 30upx;
}

.caozuo view text {
  font-size: 24upx;
}

.moren {
  position: absolute;
  top: 0;
  left: 0;
}

.moren text {
  font-size: 60upx;
}
</style>
